<template>
  <div class="xuetang-page">
    <div class="page-header">
      <div class="image-logo">
        <img src="../../../assets/images/process.png" alt="">
      </div>
      <div class="title">
        监测设备：雅培瞬感I代
      </div>
      <div class="title">
        状态：已进行5天
      </div>
      <div class="title">
        管理开始时间：2020-11-10 20:20:20
      </div>
      <div class="title">
        管理结束时间：2020-11-10 20:20:20
      </div>
    </div>
    <div class="time">
      {{time1}}
    </div>
    <div class="data-analy">
      <div class="number">
        <div class="big">12.8</div>
        <div class="unit">
          <div class="arrow">
            <!-- <Icon type="md-arrow-round-up" /> -->
            <Icon type="md-arrow-round-down" />
          </div>
          <div class="unit-s">
            mmol/L
          </div>
        </div>
      </div>
      <div class="classify">
        <div class="item">
          <div class="icon-title">
            <img src="../../../assets/icons/u.png" alt="">
            <span>碳水</span>
          </div>
          <div class="sum">190g</div>
        </div>
        <div class="item">
          <div class="icon-title">
            <img src="../../../assets/icons/ku.png" alt="">
            <span>胰岛素</span>
          </div>
          <div class="sum">
            16U
          </div>
        </div>
        <div class="item">
          <div class="icon-title">
            <img src="../../../assets/icons/ci.png" alt="">
            <span>口服药</span>
          </div>
          <div class="sum">
            -.-
          </div>
        </div>
        <div class="item">
          <div class="icon-title">
            <img src="../../../assets/icons/kal.png" alt="">
            <span>运动</span>
          </div>
          <div class="sum">
            1221kcal
          </div>
        </div>
      </div>
    </div>
    <div class="chart-line">
      <ChartXueLine></ChartXueLine>
    </div>
    <div class="scheme-module">
      <div class="scheme-title">
        <div class="title">控糖方案</div>
        <div class="time-select">
          <DatePicker type="date" placeholder="选择日期" style="width: 200px"></DatePicker>
        </div>
      </div>
      <div class="data-card">
        <div class="card-food item">
          <div class="header">
            <div class="title">
              早餐 07:32
            </div>
            <div class="unit">
              <span>摄入碳水: </span>
              <span>190g</span>
            </div>
          </div>
          <div class="content" v-if="true">
            <div class="food-card-box">
              <div class="item-box" v-for="(item, index) in 9" :key="index">
                <p>咖啡</p>
                <p>500ml</p>
              </div>
            </div>
            <div class="img-card-box">
              <div class="img-item" v-for="(item, index) in 18" :key="index">
                <img src="../../../assets/images/logo-min.jpg" alt="">
              </div>
            </div>
          </div>
          <div class="content" v-else>
            <p>用户还没有输入早餐信息</p>
          </div>
        </div>
        <div class="card-scheme item">
          <div class="header">
            <div class="title">
              早餐饮食方案
            </div>
            <div class="unit">
              <span>摄入碳水: </span>
              <span>190g</span>
            </div>
          </div>
          <div class="content" v-if="true">
             <div class="food-plus-box">
              <div class="item-box" v-for="(item, index) in 9" :key="index">
                <p><img src="../../../assets/icons/ku.png" alt=""> 紫菜汤</p>
                <p>160ml</p>
              </div>
              <div class="beizhu">
                备注：小米粥500升/鱼香肉丝1盘/紫菜蛋花汤400g/油条1根/菜花40g/鱼肉40g/香肠4个
              </div>
            </div>
          </div>
          <div class="content" v-else>
            <p>用户已添加饮食，您可填写意见备注。</p>
          </div>
        </div>
        <div class="card-accounting item">
          <div class="header">
            <div class="title">
              早餐数据分析
            </div>
            <div class="unit">
              <span>恢复到正常值时间: </span>
              <span>190g</span>
            </div>
          </div>
          <div class="content" v-if="true">
            <div class="class-box">
              <div class="class-box-item" v-for="(item, index) in 3" :key="index">
                <div class="title">餐前血糖值</div>
                <div class="time">12:00</div>
                <div class="number">5.8</div>
                <div class="unit">mmol/L</div>
              </div>
            </div>
            <div class="chart">
              <ChartXueLine></ChartXueLine>
            </div>
          </div>
          <div class="content" v-else>
            <p>输入饮食2个小时后
            展示数据分析结果</p>
            <p>Icons</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { ChartXueLine } from '_c/charts'
// import { getTableData } from '@/api/data'
import Icons from '_c/icons'

export default {
  name: 'tables_page',
  components: {
    Tables,
    ChartXueLine,
    Icons
  },
  data () {
    return {
      time1: '3分钟前更新  14:35',
      columns: [
        { title: 'Name', key: 'name', sortable: true },
        { title: 'Email', key: 'email', editable: true },
        { title: 'Create-Time', key: 'createTime' },
        {
          title: 'Handle',
          key: 'handle',
          options: ['delete'],
          button: [
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    vm.$emit('on-delete', params)
                    vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
                  }
                }
              }, [
                h('Button', '自定义删除')
              ])
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    }
  },
  mounted () {
    // getTableData().then(res => {
    //   this.tableData = res.data
    // })
  }
}
</script>

<style lang='less' scoped>
.size {
  width: 100%;
  height: 100%;
}
.xuetang-page {
  width: 100%;
}
.page-header {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #F7F7F7;
  border-radius: 1px;
  .image-logo {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    margin-left: 5px;
    img {
      .size;
    }
  }
  .title {
    margin-right: 20px;
    font-size: 12px;
  }
}
.time {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9F9F9F;
  line-height: 23px;
  margin-top: 20px;
}
.data-analy {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .number {
    display: flex;
    align-items: center;
    .big {
      font-size: 64px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #242424;
      line-height: 89px;
      margin-right: 12px;
    }
    .unit {
      .arrow {
        font-size: 32px;
        color: #242424;
        text-align: center;
      }
      .unit-s {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9F9F9F;
        line-height: 23px;
        position: relative;
        top: -10px;
      }
    }
  }
  .classify {
    display: flex;
    .item {
      width: 100px;
      margin-left: 30px;
      text-align: center;
      .icon-title {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: center;
        span {
          display: inline-block;
          margin-left: 3px;
        }
      }
      .sum {
        width: 100%;
        text-align: center;
        font-size: 22px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #242424;
        line-height: 32px;
      }
    }
  }
}
.chart-line {
  width: 100%;
  height: 230px;
  .charts {
    width: 100%;
    height: 100%;
    div {
      height: 100%;
    }
  }
}
.scheme-module {
  width: 100%;
  .scheme-title {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .data-card {
    width: 100%;
    height: 268px;
    background: #FFFFFF;
    border-radius: 1px;
    border: 1px solid #E6E9F0;
    margin-top: 20px;
    padding: 10px 0;
    display: flex;
    .item {
      flex: 1;
      padding: 0 20px;
      border-right: 1px solid #ddd;
    }
    .card-accounting {
      border-right: 0px solid #ddd;
    }
    .header {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .content {
      width: 100%;
      margin-top: 10px;
      .food-card-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item-box {
          width: 28%;
          height: 45px;
          text-align: center;
          background: chartreuse;
          margin-right: 14px;
          padding: 5px;
          margin-bottom: 10px;
          border-radius: 4px;
          p {
            font-size: 12px;
          }
        }
      }
      .food-plus-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item-box {
          width: 28%;
          height: 45px;
          text-align: center;
          background:#fff;
          border: 1px solid #ccc;
          margin-right: 14px;
          padding: 5px;
          margin-bottom: 10px;
          border-radius: 4px;
          p {
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              width: 12px;
              height: 12px;
            }
          }
        }
      }
      .beizhu {
        font-size: 12px;
      }
      .img-card-box {
        width: 330px;
        overflow-x: auto;
        display: flex;
        .img-item {
          width: 35px;
          height: 35px;
          margin-right: 10px;
          img {
            width: 35px;
            height: 35px;
          }
        }
      }
      .class-box {
        display: flex;
        justify-content: space-between;
        .class-box-item {
          text-align: center;
          .title {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #242424;
            line-height: 9px;
          }
          .time {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9F9F9F;
            line-height: 11px;
            margin: 10px 0 3px;
          }
          .number {
            font-size: 35px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: #26C3A8;
            line-height: 35px;
          }
          .unit {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9F9F9F;
            line-height: 11px;
            margin: 5px 0 0;
          }
        }
      }
      .chart {
        width: 100%;
        height: 120px;
        .charts {
          width: 100%;
          height: 100%;
          div {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
